<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>封装 cookie 的操作函数  </h2>
    <button id="save">存储 Cookie</button>
    <button id="get">获取 Cookie</button>
    <p>
        <button id="edit" >修改 Cookie </button>
        <button id="del" >删除 Cookie </button>
    </p>
</body>
<script>
    // 封装 getCookie(key)   return value 
    // 封装 setCookie    
    // (key,val,day,path='/')
    // 封装 delCookie  

   // 使用和学习 cookie 必须要使用带有服务器环境的编辑器打开  

    // cookie 是跟服务器有关  域名挂钩  域名区别  (www.taobao.com)

    // cookie 的创建  
    // 1. cookie 的存取都依赖于 document.cookie 
    // 2. cookie是以键值对(key=value)形式存在的字符串  {key:value}   key=value 
    // 3. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)

    var save = document.getElementById("save")
    var get = document.getElementById("get")
    var edit = document.querySelectorAll("#edit")[0]
    var del = document.querySelector('#del')

    save.onclick = function(){
        // var date = new Date();
        // date.setDate(date.getDate()+7)
        // console.log(date)
        // document.cookie = "user=zuozuomu;expires="+date.toUTCString()+";path=/";
        // document.cookie = "pass=abc123;expires="+date.toUTCString()+";path=/";
        // document.cookie = "phone=18012341234;expires="+date.toUTCString()+";path=/";
        // document.cookie = "email=zkl.qq.com;expires="+date.toUTCString()+";path=/";

        setCookie('user','a123123',7,'/')
        // setCookie('pass','000000','/day1')
        setCookiePro({day:15,key:'pass',val:"yyds88",path:"/"})
        setCookie('phone','18012341234',30)
        setCookie('email','zkl.qq.com',375)
    
    }

    // 设置一个cookie path='/' 默认  值为  /  
    function setCookie(key,val,day,path='/'){
        if(day){
            var date = new Date()
            date.setDate(date.getDate()+day)
            document.cookie = `${key}=${val};expires=${date.toUTCString()};path=${path}`

        }else{
            document.cookie = key+"="+val+";path=/";
        }
    }
    // setCookie({key:'user',val:"a123123"})  // 没有顺序  参数可以自由省略 
    function setCookiePro(options){
        var {key,val,day,path='/'}  = options;
        if(day){
            var date = new Date()
            date.setDate(date.getDate()+day)
            document.cookie = `${key}=${val};expires=${date.toUTCString()};path=${path}`

        }else{
            document.cookie = key+"="+val+";path=/";
        }
    }


    function getCookie(key){
        // debugger;    //开启断点调试 
        var cookie = document.cookie
        // var value = ""
        if(cookie){
            var arr = cookie.split("; ")
            // console.log(arr)
            // 循环一个数组然后  从数组里面取出对应的 key-value 
            for(var i=0;i<arr.length;i++){
                var item = arr[i]  
                var attr = item.split("=")[0]
                var value = item.split("=")[1]    // 修改外部环境的 value 的值 
                if(key==attr){
                    // console.log(value)
                    return value
                }
            }  
        }
        return ""    // 考虑 cookie 为空的情况 
    }


    // 获取 cookie 
    // 封装 getCookie(key)
    get.onclick = function(key){   

        console.log(getCookie('user') )
        console.log(getCookie('pass') )
        console.log(getCookie('phone') )
        console.log(getCookie('email') )
        
        // var cookie = document.cookie
        // console.log(cookie)
        // if(cookie){
        //     var obj = {}
        //     var arr =  cookie.split("; ")
        //     console.log(arr)
        //     for(var i=0;i<arr.length;i++){
        //         var item = arr[i]
        //         console.log(item)
        //         var key = item.split("=")[0]
        //         var value = item.split("=")[1]
        //         // obj.key = value   key 是一个  字符串key 不是变量 key
        //         obj[key] = value 
        //     }
        //     console.log(obj)
        // }
    }
    // 修改 cookie  
    // 通过对应的 键值  去修改对应的 value 值
    // 重新赋值
    edit.onclick = function(){
        setCookie("user","daydayup",7)
        setCookie("pass",'abc123',7)
        setCookie("phone",'16812341234',7)
        setCookie("email",'16812341234@qq.com',7)
        
        // var date = new Date();
        // date.setDate(date.getDate()+7)
        // console.log(date)
        // document.cookie = "user=xiaohu;expires="+date.toUTCString()+";path=/";
        // document.cookie = "pass=qwer12;expires="+date.toUTCString()+";path=/";
        // document.cookie = "phone=201820182018;expires="+date.toUTCString()+";path=/";
        // document.cookie = "email=rng.qq.com;expires="+date.toUTCString()+";path=/"; 
    }

    // 删除 cookie   -->不能对 document.cookie  赋值为空 user=''  
    // cookie 默认浏览器关闭就会删除   设置expires 就会在过期以后才去删除  
    // 如何删除 cookie 
    // 将过期时间设置为已经过去的时间  (赋值为空,刷新页面)

    function delCookie(key){     // 形参 函数定义时候的参数为形参  
        setCookie(key,'',-1)
        window.location.reload()
    }
    del.onclick = function(){
        // var date = new Date();
        // date.setDate(date.getDate()-1)
        // console.log(date)
        // document.cookie = "user=;expires="+date.toUTCString()+";path=/";
        // document.cookie = "pass=;expires="+date.toUTCString()+";path=/";
        // document.cookie = "phone=;expires="+date.toUTCString()+";path=/";
        // document.cookie = "email=;expires="+date.toUTCString()+";path=/"; 

        delCookie('user')   // 实参 函数执行的时候参数为实参  
        delCookie("pass")
        delCookie("phone")
        delCookie("email")

        
    }
</script>
</html>